<template>
    <div>
        <div class="main">
            <div id="main"></div>
            <div id="main1"></div>
        </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {
    defineComponent,
    ref,
    computed,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
} from "vue";

export default defineComponent({
    setup() {
        onBeforeMount(() => {
            //console.log("onBeforeMount", "1");
        });
        onMounted(() => {
            //console.log("onMounted", "1");
            setTimeout(() => {
                draw();
                draw1();
            })
        });
        // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值，会死循环的哦！
        onBeforeUpdate(() => {
            //console.log("onBeforeUpdate", "1");
        });
        onUpdated(() => {
            //console.log("onUpdated", "1");
        });
        onBeforeUnmount(() => {
            //console.log("onBeforeUnmount", "1");
        });
        onUnmounted(() => {
            //console.log("onUnmounted", "1");
        });
        function draw() {
            //console.log("344");
            let params = {
                zhanbiObj: {
                    A: [{
                        name: "AS",
                        value: "10"
                    }],
                    B: [{
                        name: "BS",
                        value: "23"
                    }]
                },
                name: ["A", "B"]
            }
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main"));
            // 20种 总共40种颜色提供使用
            let colorList = [];
            let color1 = "rgba(36,131,227," + "1)";
            let color2 = "rgba(44,178,118," + "1)";

            // TODO 需计算出 直流与交流的 分别数量
            let len1 = params.zhanbiObj[params.name[0]].length;
            let len2 = params.zhanbiObj[params.name[1]].length;
            let num1 = 0;
            let num2 = 0;

            let index = 0;
            for (let i = 0; i < len1; i++) {
                let num = (1 - ((index * 100) / 100).toFixed(2)).toFixed(2) * 1;
                colorList.push("rgba(36,131,227," + num + ")");
                index += 0.05;
                num1 += params.zhanbiObj[params.name[0]][i].value;
            }

            let index1 = 0;
            for (let i = 0; i < len2; i++) {
                let num = (1 - ((index1 * 100) / 100).toFixed(2)).toFixed(2) * 1;
                colorList.push("rgba(44,178,118," + num + ")");
                index1 += 0.05;
                num2 += params.zhanbiObj[params.name[1]][i].value;
            }

            let option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{b} <br/> {d}%",
                },
                legend: {
                    data: params.name,
                    bottom: "5%",
                    left: "center",
                },
                series: [
                    {
                        type: "pie",
                        itemStyle: {
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        radius: ["10%", "30%"],
                        label: {
                            position: "inner",
                            fontSize: 12,
                        },
                        color: [color1, color2],
                        data: [
                            { value: num1, name: params.name[0] },
                            { value: num2, name: params.name[1] },
                        ],
                    },
                    {
                        type: "pie",
                        radius: ["35%", "55%"],
                        label: {
                            formatter: "{b}\n{d}%",
                        },
                        itemStyle: {
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        color: colorList,
                        data: [
                            ...params.zhanbiObj[params.name[0]],
                            ...params.zhanbiObj[params.name[1]],
                        ],
                    },
                ],
            };
            // 绘制图表
            myChart.setOption(
                option
            );
        }
        function draw1() {
            //console.log("344");
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main1"));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: "ECharts 入门示例",
                },
                tooltip: {},
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                },
                yAxis: {},
                series: [
                    {
                        name: "销量",
                        type: "bar",
                        data: [5, 20, 36, 10, 10, 20],
                    },
                ],
            });
        }
    },
});
</script>
<style lang="less" scoped>
.main {
    display: flex;
    background: #fafafa;
    width: 100%;
    height: 450px;

    >div {
        width: 50%;
        flex: 1;
        background: #fff;

        &:nth-child(1) {
            margin-right: 5px;
        }

        &:nth-child(2) {
            margin-left: 5px;
        }
    }
}
</style>
